<template>
	<view class="container">
		<!-- 引入Header组件 -->
		<Header />
		<!-- 引入分类栏目组件 -->
		<CategoryScroll :items="items" />

		<!-- 轮播图组件 -->
		<SwiperComponent :banners="banners" @clickBannerItem="clickBannerItem" />
		<view class="layout">
			<left-column></left-column>
			<right-column></right-column>
		</view>
		<view class="news-list">
			<NewsCard v-for="(item, index) in newsList" :key="index" :title="item.title" :image="item.image"
				:description="item.description" :date="item.date" :id="item.id" />
		</view>
	</view>
</template>

<script>
	import Header from '@/components/wrap/header.vue';
	import CategoryScroll from '@/components/wrap/categoryScroll.vue';
	import SwiperComponent from '@/components/wrap/swiper.vue';
	import LeftColumn from '@/components/wrap/LeftColumn.vue';
	import RightColumn from '@/components/wrap/RightColumn.vue';
	import NewsCard from '@/components/wrap/NewsCard.vue';
	import {
		getSciNew
	} from '@/api/system/sci';
	import {
		getFoodNew
	} from '@/api/system/food';
	import {
		getFocusList
	} from '@/api/system/focus';


	export default {
		components: {
			Header,
			CategoryScroll,
			SwiperComponent,
			LeftColumn,
			RightColumn,
			NewsCard,
		},
		data() {
			return {
				searchKey: '',
				newsList: [{
						title: '重症医学迎来新的发展时期',
						image: '/static/images/news.png',
						description: '在近日举办的2024春季CMEF国际医疗器械博览会上，振德医疗董事长鲁建国先生向新华网的网友们...',
						date: '2024-01-01',
						id: 31,
					},
					// 可以添加更多新闻项目
				],
				banners: [],
				items: [{
						name: '健康膳食',
						icon: '/static/icon/icon1.png',
						url: '/pages/food/list',
					},
					{
						name: '健康科普',
						icon: '/static/icon/icon2.png',
						url: '/pages/sci/list',
					},
					{
						name: '医学趣谈',
						icon: '/static/icon/icon3.png',
						url: '/pages/fun/list',
					},
					{
						name: '医学辟谣',
						icon: '/static/icon/icon4.png',
						url: '/page/column4/index',
					},
					{
						name: '奇闻轶事',
						icon: '/static/icon/icon5.png',
						url: '/pages/story/list',
					},
					// 继续添加更多栏目
				],
			};
		},
		mounted() {
			this.getFoodNew();
			this.getFocusList();
		},
		methods: {
			navigateToVistPage() {
				// 使用 uni.navigateTo 跳转到 /pages/vist 页面
				uni.navigateTo({
					url: '/pages/vist/audi',
				});
			},
			getFoodNew() {
				console.log('获取 最新膳食');
				getFoodNew()
					.then((res) => {
						console.log('获取到了最新膳食');
						console.log(res);
						console.log(this.newsList);
						this.newsList[0].title = res.data.title;
						this.newsList[0].image = res.data.cover || '/static/images/404.png';
						this.newsList[0].description = res.data.info;
						this.newsList[0].date = res.data.createTime;
						this.newsList[0].id = res.data.id;
					})
					.catch((err) => {
						console.error('获取膳食数据失败:', err);
					});
			},
			getFocusList() {
				console.log('获取 轮播图');
				getFocusList()
					.then((res) => {
						console.log('获取到了轮播图');
						console.log(res);
						this.banners = res.rows.map(item => ({
							id: item.id,
							image: item.cover,
							title: item.title,
							linkurl: item.linkurl
						}));
					})
					.catch((err) => {
						console.error('获取轮播图数据失败:', err);
					});
			},
			navigateTo(url) {
				console.log('跳转到' + url);
				uni.navigateTo({
					url,
				});
			},
			clickBannerItem(banner) {
				console.log('点击了轮播图', banner);
				if (banner.linkurl) {
					this.navigateTo(banner.linkurl);
				}
			},
		},
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		padding: 10px;
		background-color: #fff;
		box-sizing: border-box;
		height: 100vh;
		overflow: auto;
		/* 允许内容滚动 */
		-webkit-overflow-scrolling: touch;
		/* 在移动设备上启用平滑滚动 */
	}

	.news-list {
		display: flex;
		flex-direction: column;
		margin-top: 10px;
		/* 添加一个上边距，确保与其他内容分开 */
		margin-bottom: 20px;
	}

	.layout {
		display: flex;
		height: 300px;
		margin-top: 20px;
	}

	left-column {
		width: 30%;
	}

	right-column {
		width: 70%;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>